<template>
    <div>
        <a-button
            class="editable-add-btn"
            style="margin-bottom: 8px"
            @click="handleAdd"
            >Add</a-button
        >
        <a-table :columns="columns" :data-source="dataSource" bordered>
            <template #bodyCell="{ column, text, record }">
                <template
                    v-if="['name', 'age', 'address'].includes(column.dataIndex)"
                >
                    <div>
                        <a-input
                            v-if="editableData[record.key]"
                            v-model:value="
                                editableData[record.key][column.dataIndex]
                            "
                            style="margin: -5px 0"
                        />
                        <template v-else>
                            {{ text }}
                        </template>
                    </div>
                </template>
                <template v-else-if="column.dataIndex === 'operation'">
                    <div class="editable-row-operations">
                        <span v-if="editableData[record.key]">
                            <a-typography-link @click="save(record.key)"
                                >Save</a-typography-link
                            >
                            <a-popconfirm
                                title="Sure to cancel?"
                                @confirm="cancel(record.key)"
                            >
                                <a>Cancel</a>
                            </a-popconfirm>
                        </span>
                        <span v-else>
                            <a @click="edit(record.key)">Edit</a>
                        </span>
                    </div>
                </template>
            </template>
        </a-table>
    </div>
</template>
<script>
import { cloneDeep } from "lodash-es";
import { computed, defineComponent, reactive, ref } from "vue";
const columns = [
    {
        title: "组件名",
        dataIndex: "name",
        width: "25%",
    },
    {
        title: "属性名",
        dataIndex: "age",
        width: "15%",
    },
    {
        title: "属性key",
        dataIndex: "address",
        width: "40%",
    },
    {
        title: "操作",
        dataIndex: "operation",
    },
];
const data = [];

for (let i = 0; i < 2; i++) {
    data.push({
        key: i.toString(),
        name: `组件名 ${i}`,
        age: `属性名 ${i}`,
        address: `属性key ${i}`,
    });
}

export default defineComponent({
    setup() {
        const dataSource = ref(data);
        const editableData = reactive({});
        const count = computed(() => dataSource.value.length + 1);
        const handleAdd = () => {
            const newData = {
                key: `${count.value}`,
                name: `组件名 ${count.value}`,
                age: `属性名 ${count.value}`,
                address: `属性key${count.value}`,
            };
            dataSource.value.push(newData);
        };
        const edit = (key) => {
            editableData[key] = cloneDeep(
                dataSource.value.filter((item) => key === item.key)[0]
            );
        };

        const save = (key) => {
            Object.assign(
                dataSource.value.filter((item) => key === item.key)[0],
                editableData[key]
            );
            delete editableData[key];
        };

        const cancel = (key) => {
            delete editableData[key];
        };

        return {
            dataSource,
            columns,
            editingKey: "",
            editableData,
            edit,
            save,
            cancel,
            handleAdd,
        };
    },
});
</script>
<style scoped>
.editable-row-operations a {
    margin-right: 8px;
}
</style>